<template>
  <cjui-loading-progress class="SystemUpdateLog" :loading="tableState.loading">
    <el-timeline>
      <el-timeline-item
        v-for="(item, i) in tableState.data"
        :key="i"
        :timestamp="dayjs(item.createTime).format('YYYY-MM-DD')"
        placement="top"
      >
        <el-card>
          <h4>{{ item.name }}</h4>
          <div v-dompurify-html="item.htmlText"></div>
        </el-card>
      </el-timeline-item>
    </el-timeline>
  </cjui-loading-progress>

  <div
    v-show="!tableState.loading"
    class="mb-20px text-center text-14px text-[var(--el-text-color-placeholder)]"
  >
    <span v-if="tableState.data.length >= tableState.total">-- 已经到底了 --</span>
    <el-link v-else :underline="false" type="primary" @click="getMoreData">
      -- 点击查看更多 --
    </el-link>
  </div>
</template>

<script lang="ts" setup>
import { dayjs } from 'element-plus'

const { tableState, tableMethods } = useTableHook({
  getData: async () => {
    tableState.loading = true
    try {
      tableState.total = 10
      tableState.data.push({
        createTime: '2024-04-13',
        name: '更新日志@0.0.0',
        htmlText: '内容完善中...'
      })
    } finally {
      tableState.loading = false
    }
  }
})

function getMoreData() {
  tableState.current++
}

onMounted(() => {
  tableMethods.getData()
})
</script>

<style lang="scss" scoped>
@media screen and (width >= 749px) {
  .SystemUpdateLog {
    padding: 60px 60px 10px 200px;
  }

  :deep(.el-timeline-item__timestamp.is-top) {
    position: relative;
    top: -2px;
    left: -150px;
    font-size: 20px;
  }

  :deep(.el-timeline-item__content) {
    margin-top: -28px;
  }
}

.el-timeline {
  padding-left: 0;
}

:deep(.el-timeline-item__node--normal) {
  left: -5px;
  width: 20px;
  height: 20px;
  border: 3px solid rgb(255 255 255 / 80%);
}

:deep(.el-timeline-item__content) {
  &::before {
    position: absolute;
    left: 12px;
    display: block;
    width: 10px;
    height: 10px;
    border-top-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-style: solid;
    border-width: 10px;
    content: '';
    box-sizing: border-box;
  }
}

.el-card.is-always-shadow {
  border: 0;
  border-radius: 2px;
  box-shadow: unset;
}

:deep(.el-card__body) {
  color: #fff;

  h4 {
    padding-bottom: 1em;
    margin-top: 0;
    border-bottom: 1px solid var(--el-border-color-light);
  }
}

.el-timeline-item:nth-child(4n + 1) {
  .el-card,
  :deep(.el-timeline-item__node) {
    background: var(--cjui-color-green-grad);
  }

  :deep(.el-timeline-item__timestamp) {
    color: var(--cjui-color-green);
  }

  :deep(.el-timeline-item__tail) {
    border-color: var(--cjui-color-green);
  }

  :deep(.el-timeline-item__content) {
    &::before {
      border-right-color: var(--cjui-color-green);
    }
  }
}

.el-timeline-item:nth-child(4n + 2) {
  .el-card,
  :deep(.el-timeline-item__node) {
    background: var(--cjui-color-blue-grad-light);
  }

  :deep(.el-timeline-item__timestamp) {
    color: var(--cjui-color-blue);
  }

  :deep(.el-timeline-item__tail) {
    border-color: var(--cjui-color-blue);
  }

  :deep(.el-timeline-item__content) {
    &::before {
      border-right-color: var(--cjui-color-blue);
    }
  }
}

.el-timeline-item:nth-child(4n + 3) {
  .el-card,
  :deep(.el-timeline-item__node) {
    background: var(--cjui-color-yellow-grad-light);
  }

  :deep(.el-timeline-item__timestamp) {
    color: var(--cjui-color-yellow);
  }

  :deep(.el-timeline-item__tail) {
    border-color: var(--cjui-color-yellow);
  }

  :deep(.el-timeline-item__content) {
    &::before {
      border-right-color: var(--cjui-color-yellow);
    }
  }
}

.el-timeline-item:nth-child(4n + 4) {
  .el-card,
  :deep(.el-timeline-item__node) {
    background: var(--cjui-color-red-grad-light);
  }

  :deep(.el-timeline-item__timestamp) {
    color: var(--cjui-color-red);
  }

  :deep(.el-timeline-item__tail) {
    border-color: var(--cjui-color-red);
  }

  :deep(.el-timeline-item__content) {
    &::before {
      border-right-color: var(--cjui-color-red);
    }
  }
}
</style>
